var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var Tiyan = require('../components/Tiyan.js');
var ajax = require('../tools/ajax');


module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            tiyanInfo:[],
            tiyanList:''
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getTiyanInfo();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#tiyanWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.refresh();
        document.addEventListener('touchmove', function(){}, false);
    },

    getTiyanInfo(){
        var p =this;
        ajax("POST","getTiyanInfo",{},function(dt){
            if(dt&&dt.success){
                var objs = dt.data;
                p.setState({tiyanInfo:objs});
            }
        })
    },

    render: function () {
        var p = this;
        var tiyanInfo = p.state.tiyanInfo;
        var tiyanList = tiyanInfo.map(function (obj,index) {
            return (
                <Tiyan key={index} zan={p.getTiyanInfo} tiyanInfo={obj}></Tiyan>
            )
        });
        return (
            <div className="main"  id="main">
                <Bheader theme={p.state.theme} title="体验专区" headr="false" ></Bheader>
                <div id="tiyanWrapper" className="container-t noFooter">
                    <div style={{minHeight:"31.16rem"}}>
                        {tiyanList}
                    </div>
                </div>
            </div>
        )
    }
});
